<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title></title>
</head>
<body>
<div id="app">
    <div class="app">
        <el-row :gutter="24">
            <el-col :span="8">
                <dv-decoration-3 style="height: 6vh"></dv-decoration-3>
            </el-col>
            <el-col :span="8">
                <dv-decoration-7 style="height: 6vh;color: #00afff;font-size: 35px"><span class="system-title">第一工程公司-子公司业务监控平台</span>
                </dv-decoration-7>
            </el-col>
            <!--        <el-col :span="8"><img src="../assets/images/1712155508764.jpg" class="top-image" alt="Header Image"></el-col>-->
            <el-col :span="8">
                <dv-decoration-3 :reverse="true" style="height: 6vh"></dv-decoration-3>
            </el-col>
        </el-row>
        <!--    <div class="title-section">-->
        <!--        <el-row :gutter="24" class="title-row">-->
        <!--            <el-col :span="24" class="title-col">-->
        <!--                <div class="title-content">-->
        <!--                    <span class="title-text">第一工程公司-子公司业务监控平台</span>-->
        <!--                </div>-->
        <!--            </el-col>-->
        <!--        </el-row>-->
        <!--    </div>-->

        <!--左上模块 科研立项-->
        <div class="upperLeft">

            <div style="display: flex; align-items: center;">

                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
                <span style="color: white">科研立项</span>
            </div>
            <div style="height: 0.5vh"></div>
            <div style="display: flex; justify-content: center; align-items: center;">
                <dv-scroll-board :config="projectApprovalConfig" style="width:96%;height:22vh"/>
            </div>

        </div>

        <!--中上模块 科技成果数据统计（当年）-->
        <div class="soSo">
            <div style="display: flex; align-items: center;">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
                <span style="color: white">科技成果数据统计（当年）</span>
            </div>
            <div style="height: 0.5vh"></div>

            <div style="color: white;left: 4%;position: absolute;">
                <el-row :gutter="90" style="margin-top: 2vh">
                    <el-col :span="8" style="white-space: nowrap;">省部级科技奖: {{ 1 }}个</el-col>
                    <el-col :span="8" style="white-space: nowrap;">电建集团科技奖: {{ 1 }}个</el-col>
                    <el-col :span="8" style="white-space: nowrap;">公司科技奖: {{ 1 }}个</el-col>
                </el-row>

                <el-row :gutter="90" style="margin-top: 3vh">
                    <el-col :span="8" style="white-space: nowrap;">学会协会科技奖: {{ 1 }}个</el-col>
                    <el-col :span="8" style="white-space: nowrap;">专利奖: {{ 1 }}个</el-col>
                    <el-col :span="8" style="white-space: nowrap;">其他类别: {{ 1 }}个</el-col>
                </el-row>

                <el-row :gutter="90" style="margin-top: 3vh">
                    <el-col :span="8" style="white-space: nowrap;">发明专利(授权): {{ 1 }}个</el-col>
                    <el-col :span="8" style="white-space: nowrap;">实用专利(授权): {{ 1 }}个</el-col>
                    <el-col :span="8" style="white-space: nowrap;">外观专利(授权): {{ 1 }}个</el-col>
                </el-row>

                <el-row :gutter="90" style="margin-top: 3vh">
                    <el-col :span="8" style="white-space: nowrap;">软件著作权: {{ 1 }}个</el-col>
                    <el-col :span="8" style="white-space: nowrap;">省部级工法: {{ 1 }}个</el-col>
                    <el-col :span="8" style="white-space: nowrap;">企业工法: {{ 1 }}个</el-col>
                </el-row>
            </div>


        </div>

        <!--右上模块 成果鉴定-->
        <div class="upperRight">
            <div style="display: flex; align-items: center;">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
                <span style="color: white">成果鉴定</span>
            </div>
            <div style="height: 0.5vh"></div>
            <div style="position: absolute;left: 3%;right: 3%">
            <el-table :data="appraisalTableData" height="23vh" border size="mini">
                <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
                <el-table-column show-overflow-tooltip prop="achievementName" label="成果名称" align="center"></el-table-column>
                <el-table-column show-overflow-tooltip prop="projectSource" label="项目来源" align="center"></el-table-column>
                <el-table-column show-overflow-tooltip prop="processStatus" label="流程状态" align="center">
                    <template slot-scope="scope">
                            <el-link type="primary">{{ scope.row.processStatus }}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            </div>
        </div>

        <!--左中模块 企业工法-->
        <div class="leftMiddle">
            <div style="display: flex; align-items: center;">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
                <span style="color: white">企业工法</span>
            </div>
            <div style="height: 0.5vh"></div>
            <div style="position: absolute;left: 3%;right: 3%">
                <el-table :data="constructionMethodTableData" height="29vh" border size="mini">
                    <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="constructionMethodName" label="工法名称" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="constructionMethodNumber" label="工法编号" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="state" label="状态" align="center"></el-table-column>
                </el-table>
            </div>
        </div>

        <!--中间模块 荣誉图片轮播-->
        <div class="middle">
            <div style="display: flex; align-items: center;">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
                <span style="color: white">荣誉图片轮播</span>
            </div>
            <div style="height: 0.5vh"></div>
            <div style="font-size: 16px;">
                <el-carousel :interval="5000" height="29vh" arrow="always" style="max-width: 94%; margin: auto;">
                    <el-carousel-item v-for="item in oneCompanyHonorList" :key="item.name">
                        <img :src="item.src" style="height:100%;width:100%;" alt="图片丢失了" :title="item.title"/>
                    </el-carousel-item>
                </el-carousel>
            </div>


        </div>

        <!--中下模块 会议安排-->
        <!--        <div class="lowermiddle">-->
        <!--            <div style="display: flex; align-items: center;">-->
        <!--                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>-->
        <!--                <span style="color: white">会议安排</span>-->
        <!--            </div>-->

        <!--        </div>-->

        <!--右中模块 科技进步奖（当年）-->
        <div class="rightMiddle">
            <div style="display: flex; align-items: center;">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
                <span style="color: white">科技进步奖（当年）</span>
            </div>
            <div style="height: 0.5vh"></div>
            <div style="position: absolute;left: 3%;right: 3%">
                <el-table :data="progressAwardTableData" height="29vh" border size="mini">
                    <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="topicName" label="课题名称" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="awardName" label="奖项名称" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="dateOfIssuance" label="颁发日期" align="center"></el-table-column>
                </el-table>
            </div>
        </div>

        <!--左下模块 专利申请-->
        <div class="lowerLeft">
            <div style="display: flex; align-items: center;">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
                <span style="color: white">专利申请</span>
            </div>
            <div style="height: 0.5vh"></div>
            <div style="position: absolute;left: 3%;right: 3%">
                <el-table :data="patentApplicationTableData" height="27vh" border size="mini">
                    <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="patentName" label="专利名称" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="patentType" label="专利类型" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="patentStatus" label="专利状态" align="center"></el-table-column>
                </el-table>
            </div>

        </div>

        <!--中下模块 专利授权-->
        <div class="lowerMiddle">
            <div style="display: flex; align-items: center;">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
                <span style="color: white">专利授权</span>
            </div>
            <div style="height: 0.5vh"></div>
            <div style="position: absolute;left: 3%;right: 3%">
                <el-table :data="patentAuthorizationTableData" height="27vh" border size="mini">
                    <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="patentName" label="专利名称" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="patentType" label="专利类型" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="authorizationDate" label="授权日期" align="center"></el-table-column>
                </el-table>
            </div>
        </div>

        <!--右下模块 省部级工法（当年）-->
        <div class="lowerRight">
            <div style="display: flex; align-items: center;">
                <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-left:15px;margin-right:5px; float: left;margin-top:2px"></span>
                <span style="color: white">省部级工法（当年）</span>
            </div>
            <div style="height: 0.5vh"></div>
            <div style="position: absolute;left: 3%;right: 3%">
                <el-table :data="pDCMTableData" height="27vh" border size="mini">
                    <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="constructionMethodName" label="工法名称" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="constructionMethodLevel" label="工法级别" align="center"></el-table-column>
                    <el-table-column show-overflow-tooltip prop="DateOfIssuance" label="颁发日期" align="center"></el-table-column>
                </el-table>
            </div>
        </div>


    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="./js/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./js/datav.map.vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                visible: false,
                oneCompanyHonorList: [ //荣誉图片
                    {
                        name: "2022",
                        src: "images/middle/2022年科技创新先进集体.jpg",
                        title: "2022年科技创新先进集体"
                    },
                    {
                        name: "2021",
                        src: "images/middle/2021年科技创新先进集体.jpg",
                        title: "2021年科技创新先进集体"
                    },
                    {
                        name: "2020",
                        src: "images/middle/2020年科技创新先进集体.jpg",
                        title: "2020年科技创新先进集体"
                    },
                ],
                projectApprovalConfig: { // 科研立项
                    header: ['项目编号', '项目名称', '立项日期'], //表头数据 Array<String>
                    data: [ //表数据 Array<Array>
                        ['行1列1', '行1列2', '行1列3'],
                        ['行2列1', '行2列2', '行2列3'],
                        ['行3列1', '行3列2', '行3列3'],
                        ['行4列1', '行4列2', '行4列3'],
                        ['行5列1', '行5列2', '行5列3'],
                        ['行6列1', '行6列2', '行6列3'],
                        ['行7列1', '行7列2', '行7列3'],
                        ['行8列1', '行8列2', '行8列3'],
                        ['行9列1', '行9列2', '行9列3'],
                        ['行10列1', '行10列2', '行10列3'],
                        ['行11列1', '行11列2', '行11列3']
                    ],
                    index: true, //显示行号
                    columnWidth: [130], //列宽度 Array<Number>
                    align: ['center', 'center', 'center', 'center'], //列对齐方式 Array<String>
                    indexHeader: '序号', //行号表头
                    headerBGC: '#00AFE0', //表头背景色
                },
                appraisalTableData: [{ //成果鉴定
                    achievementName: '花菜菜', projectSource: '分局科研项目',  processStatus: '流程状态'
                }, {
                    achievementName: '花菜菜', projectSource: '分局科研项目',  processStatus: '流程状态'
                }, {
                    achievementName: '花菜菜', projectSource: '公司科研项目',  processStatus: '流程状态'
                }, {
                    achievementName: '花菜菜', projectSource: '公司科研项目',  processStatus: '流程状态'
                }, {
                    achievementName: '花菜菜', projectSource: '公司科研项目',  processStatus: '流程状态'
                }, {
                    achievementName: '花菜菜', projectSource: '分局科研项目',  processStatus: '流程状态'
                }, {
                    achievementName: '花菜菜', projectSource: '公司科研项目',  processStatus: '流程状态'
                }],
                constructionMethodTableData: [{ //企业工法
                    constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
                }, {
                    constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
                }, {
                    constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
                }, {
                    constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
                }, {
                    constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
                }, {
                    constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
                }, {
                    constructionMethodName: '花菜菜工法', constructionMethodNumber: 'WJGF-666-666', state: '已公布'
                }],
                progressAwardTableData: [{ //科技进步奖（当年）
                    topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
                }, {
                    topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
                }, {
                    topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
                }, {
                    topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
                }, {
                    topicName: '土石坝推碾无人驾驶作业技术', awardName: '电力建设科学技术奖', dateOfIssuance: '2023-06-06'
                }, {
                    topicName: '土石坝推碾无人驾驶作业技术', awardName: '工程建设科学技术奖', dateOfIssuance: '2023-06-06'
                }, {
                    topicName: '土石坝推碾无人驾驶作业技术', awardName: '工程建设科学技术奖', dateOfIssuance: '2023-06-06'
                }],
                patentApplicationTableData: [{ //专利申请
                    patentName: '船坞吹扫管', patentType: '发明专利', patentStatus: '申请'
                }, {
                    patentName: '船坞吹扫管', patentType: '实用专利', patentStatus: '申请'
                }, {
                    patentName: '船坞吹扫管', patentType: '发明专利', patentStatus: '申请'
                }, {
                    patentName: '船坞吹扫管', patentType: '实用专利', patentStatus: '申请'
                }, {
                    patentName: '船坞吹扫管', patentType: '实用专利', patentStatus: '申请'
                }, {
                    patentName: '船坞吹扫管', patentType: '实用专利', patentStatus: '申请'
                }, {
                    patentName: '船坞吹扫管', patentType: '发明专利', patentStatus: '申请'
                }],
                patentAuthorizationTableData: [{ //专利授权
                    patentName: '船坞吹扫管', patentType: '发明专利', authorizationDate: '2023-12-01'
                }, {
                    patentName: '船坞吹扫管', patentType: '实用专利', authorizationDate: '2023-12-01'
                }, {
                    patentName: '船坞吹扫管', patentType: '发明专利', authorizationDate: '2023-12-01'
                }, {
                    patentName: '船坞吹扫管', patentType: '实用专利', authorizationDate: '2023-12-01'
                }, {
                    patentName: '船坞吹扫管', patentType: '实用专利', authorizationDate: '2023-12-01'
                }, {
                    patentName: '船坞吹扫管', patentType: '实用专利', authorizationDate: '2023-12-01'
                }, {
                    patentName: '船坞吹扫管', patentType: '发明专利', authorizationDate: '2023-12-01'
                }],
                pDCMTableData: [{ //省部级工法
                    constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
                }, {
                    constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
                }, {
                    constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
                }, {
                    constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
                }, {
                    constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
                }, {
                    constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
                }, {
                    constructionMethodName: '大坝迎水面六角块铺设施工工法', constructionMethodLevel: '电建工法', DateOfIssuance: '2024-01-11'
                }],

            }
        },
        method: {
        },

    })
</script>
</html>

<style>
    .app {
        position: relative;
        background: url('./images/bg.png') center center no-repeat, #0b2348; /*添加背景图片和颜色*/
        background-size: cover;
        width: 100%;
        height: 100%;
        /*border: 2px dashed #aaa;*/
        overflow: hidden;
    }

    .title-section {
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 10; /* 保证标题在最上层 */
        padding: 10px 0;
    }

    .title-content {
        color: #00afff; /* 标题文字颜色 */
        font-size: 30px;
        font-weight: bold;
    }

    .title-col { /* 居中 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*.top-image {*/
    /*    top: 6%;*/
    /*    left: 0;*/
    /*    width: 100%;*/
    /*    height: 6%; !* 调整图片高度为屏幕高度的6% *!*/
    /*    object-fit: cover; !* 图片填充方式 *!*/
    /*}*/

    .top-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6%; /* 调整图片高度为屏幕高度的6% */
        object-fit: cover; /* 图片填充方式 */
    }

    /* 左上 */
    .upperLeft {
        position: absolute;
        top: 6%; /* 距离上面 6% */
        bottom: 67%; /* 距离下面 60% */
        left: 1%; /* 距离左侧1% */
        width: 31%;
        border: 2px solid #03A9F3;
        background-color: rgba(9, 37, 59, 0.5); /* 模块背景颜色 并透明显示 */
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
        transform: scale(1); /* 初始缩放比例 */
        box-shadow: 0 0 0 transparent; /* 初始无阴影 */
    }
    .upperLeft:hover {
        border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
        background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
        transform: scale(1.05); /* 缩放至105% */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
    }

    /* 中上 */
    .soSo {
        position: absolute;
        top: 6%; /* 距离上面 6% */
        bottom: 67%; /* 距离下面 60% */
        left: 33%; /* 距离左侧1% */
        width: 34%;
        border: 2px solid #03A9F3;
        background-color: rgba(9, 37, 59, 0.5);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
        transform: scale(1); /* 初始缩放比例 */
        box-shadow: 0 0 0 transparent; /* 初始无阴影 */
    }
    .soSo:hover {
        border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
        background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
        transform: scale(1.05); /* 缩放至105% */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
    }

    /* 右上 */
    .upperRight {
        position: absolute;
        top: 6%; /* 距离上面 6% */
        bottom: 67%; /* 距离下面 60% */
        left: 68%; /* 距离左侧1% */
        width: 31%;
        border: 2px solid #03A9F3;
        background-color: rgba(9, 37, 59, 0.5);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
        transform: scale(1); /* 初始缩放比例 */
        box-shadow: 0 0 0 transparent; /* 初始无阴影 */
    }
    .upperRight:hover {
        border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
        background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
        transform: scale(1.05); /* 缩放至105% */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
    }

    /* 左中 */
    .leftMiddle {
        position: absolute;
        top: 34%; /* 距离上面 43% */
        bottom: 33%; /* 距离下面 50% */
        left: 1%; /* 距离左侧1% */
        width: 31%;
        border: 2px solid #03A9F3;
        background-color: rgba(9, 37, 59, 0.5);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
        transform: scale(1); /* 初始缩放比例 */
        box-shadow: 0 0 0 transparent; /* 初始无阴影 */
    }
    .leftMiddle:hover {
        border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
        background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
        transform: scale(1.05); /* 缩放至105% */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
    }

    /* 中 */
    .middle {
        position: absolute;
        top: 34%; /* 距离上面 43% */
        bottom: 33%; /* 距离下面 50% */
        left: 33%; /* 距离左侧1% */
        width: 34%;
        border: 2px solid #03A9F3;
        background-color: rgba(9, 37, 59, 0.5);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
        transform: scale(1); /* 初始缩放比例 */
        box-shadow: 0 0 0 transparent; /* 初始无阴影 */
    }

    /* 右中 */
    .rightMiddle {
        position: absolute;
        top: 34%; /* 距离上面 43% */
        bottom: 33%; /* 距离下面 50% */
        left: 68%; /* 距离左侧1% */
        width: 31%;
        border: 2px solid #03A9F3;
        background-color: rgba(9, 37, 59, 0.5);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
        transform: scale(1); /* 初始缩放比例 */
        box-shadow: 0 0 0 transparent; /* 初始无阴影 */
    }
    .rightMiddle:hover {
        border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
        background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
        transform: scale(1.05); /* 缩放至105% */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
    }

    /* 左下 */
    .lowerLeft {
        position: absolute;
        top: 68%; /* 距离上面 43% */
        bottom: 1%; /* 距离下面 50% */
        left: 1%; /* 距离左侧1% */
        width: 31%;
        border: 2px solid #03A9F3;
        background-color: rgba(9, 37, 59, 0.5);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
        transform: scale(1); /* 初始缩放比例 */
        box-shadow: 0 0 0 transparent; /* 初始无阴影 */
    }
    .lowerLeft:hover {
        border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
        background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
        transform: scale(1.05); /* 缩放至105% */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
    }

    /* 中下 */
    .lowerMiddle {
        position: absolute;
        top: 68%; /* 距离上面 43% */
        bottom: 1%; /* 距离下面 50% */
        left: 33%; /* 距离左侧1% */
        width: 34%;
        border: 2px solid #03A9F3;
        background-color: rgba(9, 37, 59, 0.5);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
        transform: scale(1); /* 初始缩放比例 */
        box-shadow: 0 0 0 transparent; /* 初始无阴影 */
    }
    .lowerMiddle:hover {
        border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
        background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
        transform: scale(1.05); /* 缩放至105% */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
    }

    /* 右下 */
    .lowerRight {
        position: absolute;
        top: 68%; /* 距离上面 43% */
        bottom: 1%; /* 距离下面 50% */
        left: 68%; /* 距离左侧1% */
        width: 31%;
        border: 2px solid #03A9F3;
        background-color: rgba(9, 37, 59, 0.5);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.420, 1.310), box-shadow 0.3s ease-out; /* 添加过渡效果 */
        transform: scale(1); /* 初始缩放比例 */
        box-shadow: 0 0 0 transparent; /* 初始无阴影 */
    }
    .lowerRight:hover {
        border-color: #03A9F3; /* 鼠标悬停时改变边框颜色 */
        background-color: rgba(121, 180, 225, 0.8); /* 鼠标悬停时改变背景颜色的不透明度 */
        transform: scale(1.05); /* 缩放至105% */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 14px rgba(0, 0, 0, 0.06); /* 添加阴影 */
    }

    html, body, #app {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .border-box-content {
        color: rgb(66, 185, 131);
        font-size: 40px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .el-table--mini {
        font-size: 11px;
    }

    .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
        background-color: #0B243F;
    }

    .el-table__body, .el-table__footer, .el-table__header {
        font-size: 16px;
    }

    .el-table th.el-table__cell>.cell {
        color: #00AFE0;
    }

    .el-table td.el-table__cell div {
        color: white;
    }

    .el-table__body tr:hover > td {
        background-color: #788081 !important; /* 鼠标移入ElTable后的行背景色 */
    }

</style>

